<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link to="/UserMessage">个人信息</router-link>
    <router-link to="/ShopCar">购物车</router-link>
    <router-link to="/OrderPay">订单支付</router-link>
    <router-link to="/OrderPayOver">订单支付完成</router-link>
    <router-link to="/menu">菜单</router-link>
    <router-link to="/details">详情</router-link>

    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
      点我打开
    </el-button>

    <el-drawer
      title="我是标题"
      size="45%"
      :visible.sync="drawer"
      :with-header="false">
      <span>我来啦!</span>
      <div>

        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection">
          </el-table-column>
          <el-table-column
            label="图片"
            width="150">
            <template slot-scope="scope">
              <el-avatar shape="square" :size="100" :src="scope.row.image"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="菜名">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格">
          </el-table-column>
          <el-table-column
            label="数量"
            width="200"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.number" size="mini" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            label="价格小计">
            <template slot-scope="scope">
              {{scope.row.number * scope.row.price}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" @deleteOne(scope.row.number) circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <h2>共计商品5个，已选商品3个,总计500元  <el-button type="primary">去结算</el-button></h2>

      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      drawer: false,
      tableData: [{
        gid: 0,
        date: '2016-05-03',
        name: '王小虎上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
        address: '上海市普陀区金沙江路 1518 弄',
        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        price: 50,
        //单个商品数量
        number: 2
      }, {
        gid: 0,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        image: '',
        price: 50,
        number: 2
      }, {
        gid: 0,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        image: '',
        price: 50,
        number: 2
      }],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteOne(gid){
      alert(gid)
    },
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
